import React from 'react';
import {Form, Button, Select as SelectAntd} from 'antd';
import Select from './index';
import {Selects} from './index';

//多级选择器的数据
let dataSource = [
  {
    value: '1',
    label: '广东省',
    children: [
      {
        value: '1_1',
        label: '深圳市',
        children: [
          {value: '1_1_1', label: '南山区'},
          {value: '1_1_2', label: '福田区'}
        ]
      },
      {
        value: '1_2',
        label: '广州市',
        children: [
          {value: '1_2_1', label: '天河区'},
          {value: '1_2_2', label: '白云区'}
        ]
      }
    ]
  },
  {
    value: '2',
    label: '湖北省',
    children: [
      {value: '2_1', label: '武汉市'},
      {value: '2_2', label: '天门市'}
    ]
  },
  {
    value: '3',
    label: '上海市'
  }
];

/**
 * 选择器的Demo
 */
class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ['1', '1_2', '1_2_1'],
      defaultValue: ['2', '2_1'],
      placeholder: ['请选择省', '请选择市', '请选择区'],
      dataSource: dataSource
    };
  }

  render() {
    return (
      <div>
        <h3>普通选择器</h3>
        {this.renderSelect()}
        <h3>包装label到value中</h3>
        {this.renderSelectLabel()}
        <h3>多级选择器</h3>
        {this.renderSelects()}
        <h3>多级选择器：表单校验</h3>
        {this.renderForm()}
      </div>
    );
  }

  /**
   * 普通选择器
   */
  renderSelect() {
    let props = {
      dataSource,
      style: {width: 120},
      defaultValue: undefined,
      placeholder: '请输入',
      renderItem: this.renderItem,
      showSearch: true //用于输入搜索。已设置默认的filterOption。
    };
    return <Select {...props} />;
  }

  /**
   * 包装label到value中
   */
  renderSelectLabel() {
    let {dataSource} = this.state;
    let onChange = (value) => console.log(value);
    let props = {
      labelInValue: true,
      defaultValue: {key: 0, label: '测试'},
      dataSource,
      onChange,
      showSearch: true
    };
    return <Select {...props} />;
  }

  /**
   * 多级选择器
   */
  renderSelects() {
    let {defaultValue, placeholder, dataSource} = this.state;
    let onChange = (value) => {
      console.log(value);
      this.setState({value});
    };
    let props = {
      defaultValue,
      placeholder,
      dataSource,
      onChange,
      showSearch: true,
      renderItem: this.renderItems
    };
    return <Selects {...props} />;
  }

  /**
   * 表单校验：校验多级选择器
   */
  renderForm() {
    let {validateFieldsAndScroll} = this.props.form;
    let submit = () => {
      validateFieldsAndScroll((err, values) => {
        console.log(err);
        console.log(values);
      });
    };
    //表单属性
    let formProps = {
      layout: 'horizontal', //表单布局
      labelCol: {span: 2, offset: 0}, //标签的栅格占比
      wrapperCol: {span: 12, offset: 0} //文本的栅格占比
    };
    return (
      <Form {...formProps}>
        {this.renderFormSelect()}
        <Button type="primary" style={{marginLeft: '95px'}} onClick={submit}>
          提交
        </Button>
      </Form>
    );
  }

  /**
   * 表单校验的多级选择器
   * 在Form中使用SelectMulti时，不要设置value、defaultValue，可以不设置onChange
   */
  renderFormSelect() {
    let {getFieldDecorator} = this.props.form;
    let {placeholder, dataSource} = this.state;
    let onChange = (value) => null;
    let props = {placeholder, dataSource, onChange};
    let ele = <Selects {...props} />;

    //自定义校验规则。注意：callback必须被调用
    let validator = (rule, value, callback) => {
      console.log(value);
      //错误提示
      let msg;
      if (!value || !value[0]) {
        msg = '请选择省!';
      } else if (!value[1]) {
        msg = '请选择市!';
      } else if (!value[2]) {
        msg = '请选择区!';
      }
      callback(msg);
    };
    let config = {
      //如果不设置初始值，那么初次校验时会报错
      initialValue: ['1', '1_2'],
      rules: [{validator}]
    };

    return (
      <Form.Item required={true} label="选择省市区">
        {getFieldDecorator('select', config)(ele)}
      </Form.Item>
    );
  }

  /**
   * 下拉项渲染
   */
  renderItem(item = {}, key) {
    let {label} = item;
    let props = {key, title: label, ...item};
    return <SelectAntd.Option {...props}>{label}</SelectAntd.Option>;
  }
  /**
   * 下拉项渲染:多级选择器
   */
  renderItems(item, key) {
    return (
      <Select.Option value={item.value} key={key}>
        {item.label}
      </Select.Option>
    );
  }
}

export default Form.create({})(Test);
